<template>
  <div class="UserManagementList">
    <el-card class="searchBox">
      <div class="one">
        <el-input
          v-model="id"
          placeholder="请输入ID"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
        <!-- <el-input v-model="name" placeholder="请输入昵称"></el-input> -->
        <el-input
          v-model="phone"
          placeholder="请输入手机号"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
        ></el-input>
        <el-input v-model="orderNumber" placeholder="请输入订单号"></el-input>
        <el-input v-model="code" placeholder="请输入邀请码"></el-input>
        <el-input
          v-model="pay_order_number"
          placeholder="请输入第三方订单号"
        ></el-input>
        <!--  <el-select v-model="stateVal" placeholder="请选择封禁状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select v-model="rechargeVal" placeholder="请选择充值类型">
          <el-option
            v-for="item in rechargeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->

        <!-- <el-select v-model="channelVal" placeholder="支付方式">
          <el-option
            v-for="item in channelOptions"
            :key="item.en_name"
            :label="item.cn_name"
            :value="item.en_name"
          >
          </el-option>
        </el-select>S

         
        <el-select v-model="channelVal" placeholder="支付状态">
          <el-option
            v-for="item in channelOptions"
            :key="item.en_name"
            :label="item.cn_name"
            :value="item.en_name"
          >
          </el-option>
        </el-select> -->

        <!-- <el-date-picker
          v-model="gradeTimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <el-button class="btn" @click="rechargeRechargeAuditBtn"
          >搜索查询</el-button
        > -->
      </div>

      <div class="one">
        <el-select v-model="stateVal" placeholder="请选择封禁状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select v-model="rechargeVal" placeholder="请选择充值类型">
          <el-option
            v-for="item in rechargeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select v-model="paymentMethodVal" placeholder="支付方式">
          <el-option
            v-for="item in paymentMethodOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select v-model="paymentStatusVal" placeholder="支付状态">
          <el-option
            v-for="item in paymentStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-date-picker
          v-model="gradeTimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <el-button class="btn" @click="rechargeRechargeAuditBtn"
          >搜索查询</el-button
        >
      </div>

      <div class="one">
        <p>添加金币</p>
        <el-input
          v-model="addIdInput"
          placeholder="请输入ID"
          oninput="value=value.replace(/[^\d]/g,'')"
        >
        </el-input
        ><el-select v-model="addRechargeVal" placeholder="请选择金币数量">
          <el-option
            v-for="item in optionsB"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input v-model="addReasonInput" placeholder="请输入原因"></el-input
        ><el-button class="btn" @click="addRechargeAddGoldCoinsBtn"
          >确认添加</el-button
        >
        <el-button @click="exportExcelC">导出Excel</el-button>
      </div>
      <div class="p">
        <p :class="{ active: index == 1 }" @click="activeStatusA()">用户充值</p>
        <p :class="{ active: index == 2 }" @click="activeStatusB()">系统充值</p>
      </div>
      <div v-if="this.index == 1">
        <el-table :data="tableData" v-loading="loading" style="width: 100%">
          <el-table-column prop="order_status" label="订单状态">
            <template slot-scope="scope">
              <span>{{
                scope.row.order_status == 0
                  ? "未支付"
                  : scope.row.order_status == 1
                  ? "已支付"
                  : "支付失败"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderNumber" label="订单号"> </el-table-column>
          <el-table-column prop="pay_order_number" label="第三方订单">
          </el-table-column>
          <el-table-column prop="pay_type" label="支付方式">
            <template slot-scope="scope">
              <span>{{
                scope.row.pay_type == 1
                  ? "支付宝"
                  : scope.row.pay_type == 2
                  ? "微信"
                  : scope.row.pay_type == 3
                  ? "IOS"
                  : "无"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="payTime" label="充值时间"> </el-table-column>
          <el-table-column prop="type" label="充值类型">
            <template slot-scope="scope">
              <span>{{ scope.row.type == 1 ? "金币" : "会员" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="userId" label="用户ID"> </el-table-column>
          <el-table-column prop="nickName" label="用户昵称"> </el-table-column>
          <el-table-column prop="code" label="邀请码"> </el-table-column>
          <el-table-column prop="payAmount" label="充值金额"> </el-table-column>
          <el-table-column prop="goldCoin" label="充值金币"> </el-table-column>
          <!-- <el-table-column prop="channel" label="充值渠道"> </el-table-column> -->
          <el-table-column prop="state" label="充值功能">
            <template slot-scope="scope">
              <span>{{ scope.row.state == 0 ? "封禁" : "正常" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="封禁管理">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="small"
                @click="userBanBtn(scope.row)"
                round
                v-if="scope.row.state == 1"
                >封禁充值</el-button
              >
              <el-button
                size="small"
                type="success"
                @click="unsealBtn(scope.row)"
                round
                v-if="scope.row.state == 0"
                >解封充值</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="page"
          :limit.sync="pageSize"
          @pagination="getList"
        />
      </div>
      <div v-if="this.index == 2">
        <!-- <el-table :data="tableDataA" style="width: 100%" v-if="this.index == 2">
          <el-table-column prop="time" label="充值时间"> </el-table-column>
          <el-table-column prop="userId" label="用户ID"> </el-table-column>
          <el-table-column prop="nickName" label="用户昵称"> </el-table-column>
          <el-table-column prop="coin" label="充值金币"> </el-table-column>
          <el-table-column prop="reason" label="充值原因"> </el-table-column>
          <el-table-column prop="adminName" label="操作人"> </el-table-column>
        </el-table> -->
        <el-table :data="tableDataA" v-loading="loadingA" style="width: 100%">
          <el-table-column prop="time" :key="223" label="充值时间" width="180">
            <!-- <template slot-scope="scope">{{ scope.row.time }}</template> -->
          </el-table-column>
          <el-table-column prop="userId" :key="2234" label="用户ID">
          </el-table-column>
          <el-table-column prop="nickName" :key="223444" label="用户昵称">
          </el-table-column>
          <el-table-column prop="coin" :key="24544" label="充值金币">
          </el-table-column>
          <el-table-column prop="reason" :key="56454" label="充值原因">
          </el-table-column>
          <el-table-column prop="adminName" :key="45556" label="操作人">
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalA > 0"
          :total="totalA"
          :page.sync="pageA"
          :limit.sync="pageSizeA"
          @pagination="getListA"
        />
      </div>
      <!-- <div v-if="this.indexB==2">
         <el-table :data="tableDataA" style="width: 100%">
        <el-table-column prop="time" label="充值时间"> </el-table-column>
        <el-table-column prop="userId" label="用户ID"> </el-table-column>
        <el-table-column prop="nickName" label="用户昵称"> </el-table-column>
        <el-table-column prop="coin" label="充值金币"> </el-table-column>
        <el-table-column prop="reason" label="充值原因"> </el-table-column>
        <el-table-column prop="adminName" label="操作人"> </el-table-column>
      </el-table>
      <pagination
        v-show="totalA > 0"
        :total="totalA"
        :page.sync="pageA"
        :limit.sync="pageSizeA"
        @pagination="getListA"
      />
       </div> -->
    </el-card>
  </div>
</template>

<script>
import {
  rechargeRechargeAudit,
  rechargeSystemRechargeAudit,
  rechargeAddGoldCoins,
  rechargeBan,
} from "@/api/AuditManagement";
import { channelList } from "@/api/DataManagement";
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      loading: true,
      loadingA: true,
      index: 1,
      input: "",
      id: "", //ID
      orderNumber: "", //订单号
      pay_order_number: "", //第三方订单
      code: "",
      // name: "", //昵称
      phone: "", //手机号
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      gradeTimeValStartDate: "", //时间开始
      gradeTimeValEndDate: "", //时结束
      gradeTimeVal: "", //时间
      options: [
        {
          value: 0,
          label: "封禁",
        },
        {
          value: 1,
          label: "正常",
        },
      ],
      stateVal: "", //状态
      optionsB: [
        {
          value: "100",
          label: "100金币",
        },
        {
          value: "1000",
          label: "1000金币",
        },
        {
          value: "5000",
          label: "5000金币",
        },
      ],
      //支付方式
      paymentMethodVal: "", //状态
      paymentMethodOptions: [
        {
          value: "",
          label: "不限支付方式",
        },
        {
          value: "1",
          label: "支付宝",
        },
        {
          value: "2",
          label: "微信",
        },
        {
          value: "3",
          label: "IOS",
        },
      ],
      //充值类型
      rechargeVal: "", //状态
      rechargeOptions: [
        {
          value: "1",
          label: "金币",
        },
        {
          value: "2",
          label: "会员",
        },
      ],
      //支付状态
      paymentStatusVal: "",
      paymentStatusOptions: [
        {
          value: "0",
          label: "未支付",
        },
        {
          value: "1",
          label: "已支付",
        },
        {
          value: "2",
          label: "支付失败",
        },
      ],
      tableData: [],
      tableDataA: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数

      totalA: 0,
      pageA: 1,
      pageSizeA: 10,

      addIdInput: "", //添加ID
      addRechargeVal: "", //添加金币
      addReasonInput: "", //添加原因
    };
  },
  methods: {
    // 导出
    exportExcelC() {
      if (this.index == 1) {
        rechargeRechargeAudit({
          page: 1,
          pageSize: this.total,
          startTime: "",
          endTime: "",
          id: "",
          name: "",
          phone: "",
          state: "", //状态 0封禁 1正常
          pay_order_number: "", //第三方订单
          type: "", //充值类型
          order_status: "", //订单状态
          pay_type: "", //支付方式
          code: "", //邀请码
        }).then((res) => {
          if (res.code == 0) {
            res.data.list.forEach((item) => {
              if (item.pay_type == 1) {
                item.pay_type = "支付宝";
              } else if (item.pay_type == 2) {
                item.pay_type = "微信";
              } else if (item.pay_type == 3) {
                item.pay_type = "IOS";
              }
              if (item.type == 1) {
                item.type = "金币";
              } else {
                item.type = "会员";
              }
              if (item.state == 0) {
                item.state = "封禁";
              } else if (item.state == 1) {
                item.state = "正常";
              }
            });
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = [
              "订单状态",
              "订单号",
              "第三方订单",
              "支付方式",
              "充值时间",
              "充值类型",
              "用户id",
              "用户昵称",
              "邀请码",
              "充值金额",
              "充值金币",
              "充值功能",
            ]; // 上面设置Excel的表格第一行的标题
            const filterVal = [
              "order_status",
              "orderNumber",
              "pay_order_number",
              "pay_type",
              "payTime",
              "type",
              "userId",
              "nickName",
              "code",
              "payAmount",
              "goldCoin",
              "state",
            ]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = res.data.list; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "用户充值记录"); //最后一个是表名字
          }
        });
        // console.log(tabList);
      } else if (this.index == 2) {
        rechargeSystemRechargeAudit({
          page: 1,
          pageSize: this.totalA,
          startTime:
            this.gradeTimeValStartDate == undefined
              ? ""
              : this.gradeTimeValStartDate,
          endTime:
            this.gradeTimeValEndDate == undefined
              ? ""
              : this.gradeTimeValEndDate,
          id: this.id,
          name: this.name,
          phone: this.phone,
          state: this.stateVal, //状态 0封禁 1正常
          orderNumber: this.orderNumber,
          pay_order_number: this.pay_order_number,
          type: this.rechargeVal,
          order_status: this.paymentStatusVal, //订单状态
          pay_type: this.paymentMethodVal, //支付方式
          code: this.code, //邀请码
        }).then((res) => {
          if (res.code == 0) {
            // console.log(res);
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = [
              "充值时间",
              "用户ID",
              "用户昵称",
              "充值金币",
              "充值原因",
              "操作人",
            ]; // 上面设置Excel的表格第一行的标题
            const filterVal = [
              "time",
              "userId",
              "nickName",
              "coin",
              "reason",
              "adminName",
            ]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = res.data.list; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "系统充值记录"); //最后一个是表名字
          }
        });
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //充值审核列表
    rechargeRechargeAudit() {
      this.loading = true;
      rechargeRechargeAudit({
        page: this.page,
        pageSize: this.pageSize,
        startTime: "",
        endTime: "",
        id: "",
        name: "",
        phone: "",
        state: "", //状态 0封禁 1正常
        pay_order_number: "", //第三方订单
        type: "", //充值类型
        order_status: "", //订单状态
        pay_type: "", //支付方式
        code: "", //邀请码
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    //搜索查询
    rechargeRechargeAuditBtn() {
      // console.log(this.gradeTimeValStartDate);

      this.page = 1;

      this.pageA = 1;

      if (this.index == 1) {
        this.loading = true;

        rechargeRechargeAudit({
          page: this.page,
          pageSize: this.pageSize,
          startTime:
            this.gradeTimeValStartDate == undefined
              ? ""
              : this.gradeTimeValStartDate,
          endTime:
            this.gradeTimeValEndDate == undefined
              ? ""
              : this.gradeTimeValEndDate,
          id: this.id,
          name: this.name,
          phone: this.phone,
          state: this.stateVal, //状态 0封禁 1正常
          orderNumber: this.orderNumber,
          pay_order_number: this.pay_order_number,
          type: this.rechargeVal,
          order_status: this.paymentStatusVal, //订单状态
          pay_type: this.paymentMethodVal, //支付方式
          code: this.code, //邀请码
        }).then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.list;
            this.total = parseInt(res.data.count);
            this.loading = false;
          }
        });
      } else {
        this.loadingA = true;

        rechargeSystemRechargeAudit({
          page: this.pageA,
          pageSize: this.pageSizeA,
          startTime:
            this.gradeTimeValStartDate == undefined
              ? ""
              : this.gradeTimeValStartDate,
          endTime:
            this.gradeTimeValEndDate == undefined
              ? ""
              : this.gradeTimeValEndDate,
          id: this.id,
          name: this.name,
          phone: this.phone,
          state: this.stateVal, //状态 0封禁 1正常
          orderNumber: this.orderNumber,
          pay_order_number: this.pay_order_number,
          type: this.rechargeVal,
          order_status: this.paymentStatusVal, //订单状态
          pay_type: this.paymentMethodVal, //支付方式
          code: this.code, //邀请码
        }).then((res) => {
          if (res.code == 0) {
            // console.log(res);
            this.tableDataA = res.data.list;
            this.totalA = parseInt(res.data.total);
            this.loading = false;
          }
        });
      }
    },
    //添加金币
    addRechargeAddGoldCoinsBtn() {
      if (
        this.addIdInput &&
        this.addRechargeVal &&
        this.addReasonInput !== ""
      ) {
        rechargeAddGoldCoins({
          id: this.addIdInput,
          goldCoin: this.addRechargeVal, //金币
          reason: this.addReasonInput, //原因
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "添加金币成功",
              type: "success",
            });
            this.reload();
          }
        });
      } else {
        this.$message({
          message: "添加参数不能为空需必填",
          type: "info",
        });
      }
    },
    //封禁
    userBanBtn(row) {
      this.$confirm("此操作将封禁该用户, 是否继续?", "封禁提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rechargeBan({
            id: row.userId,
            ban: "0",
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "封禁成功",
                type: "success",
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消封禁",
          });
        });
    },
    //解封
    unsealBtn(row) {
      this.$confirm("此操作将解封该用户, 是否继续?", "解封提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rechargeBan({
            id: row.userId,
            ban: "1",
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "解封成功",
                type: "success",
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解封",
          });
        });
    },
    //分页
    getList() {
      this.loading = true;

      rechargeRechargeAudit({
        page: this.page,
        pageSize: this.pageSize,
        // startTime: this.gradeTimeValStartDate,
        // endTime: this.gradeTimeValEndDate,
        startTime:
          this.gradeTimeValStartDate == undefined
            ? ""
            : this.gradeTimeValStartDate,
        endTime:
          this.gradeTimeValEndDate == undefined ? "" : this.gradeTimeValEndDate,
        id: this.userId,
        name: this.name,
        phone: this.phone,
        state: this.stateVal, //状态 0封禁 1正常
        pay_order_number: this.pay_order_number,
        type: this.rechargeVal,
        order_status: this.paymentStatusVal, //订单状态
        pay_type: this.paymentMethodVal, //支付方式
        code: this.code, //邀请码
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    // 分页
    getListA() {
      this.loadingA = true;

      rechargeSystemRechargeAudit({
        page: this.pageA,
        pageSize: this.pageSizeA,
        // startTime: this.gradeTimeValStartDate,
        // endTime: this.gradeTimeValEndDate,
        startTime:
          this.gradeTimeValStartDate == undefined
            ? ""
            : this.gradeTimeValStartDate,
        endTime:
          this.gradeTimeValEndDate == undefined ? "" : this.gradeTimeValEndDate,
        id: this.userId,
        name: this.name,
        phone: this.phone,
        state: this.stateVal, //状态 0封禁 1正常
        pay_order_number: this.pay_order_number,
        type: this.rechargeVal,
        order_status: this.paymentStatusVal, //订单状态
        pay_type: this.paymentMethodVal, //支付方式
        code: this.code, //邀请码
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.totalA = parseInt(res.data.total);
          this.loadingA = false;
        }
      });
    },
    activeStatusA() {
      this.index = 1;
      this.page = 1;
      this.loading = true;

      rechargeRechargeAudit({
        page: this.page,
        pageSize: this.pageSize,
        // startTime: this.gradeTimeValStartDate,
        // endTime: this.gradeTimeValEndDate,
        startTime:
          this.gradeTimeValStartDate == undefined
            ? ""
            : this.gradeTimeValStartDate,
        endTime:
          this.gradeTimeValEndDate == undefined ? "" : this.gradeTimeValEndDate,
        id: this.userId,
        name: this.name,
        phone: this.phone,
        state: this.stateVal, //状态 0封禁 1正常
        pay_order_number: this.pay_order_number,
        type: this.rechargeVal,
        order_status: this.paymentStatusVal, //订单状态
        pay_type: this.paymentMethodVal, //支付方式
        code: this.code, //邀请码
      }).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    activeStatusB() {
      this.loadingA = true;

      this.index = 2;
      this.pageA = 1;
      rechargeSystemRechargeAudit({
        page: this.pageA,
        pageSize: this.pageSizeA,
        // startTime: this.gradeTimeValStartDate,
        // endTime: this.gradeTimeValEndDate,
        startTime:
          this.gradeTimeValStartDate == undefined
            ? ""
            : this.gradeTimeValStartDate,
        endTime:
          this.gradeTimeValEndDate == undefined ? "" : this.gradeTimeValEndDate,
        id: this.userId,
        name: this.name,
        phone: this.phone,
        state: this.stateVal, //状态 0封禁 1正常
        pay_order_number: this.pay_order_number,
        type: this.rechargeVal,
        order_status: this.paymentStatusVal, //订单状态
        pay_type: this.paymentMethodVal, //支付方式
        code: this.code, //邀请码
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.totalA = parseInt(res.data.total);
          this.loadingA = false;
        }
        // console.log(this.tableDataA);
      });
    },
    //时间
    focus(time) {
      if (!this.gradeTimeVal) {
        this.gradeTimeVal = [];
      }
      this.gradeTimeValStartDate = this.gradeTimeVal[0];
      this.gradeTimeValEndDate = this.gradeTimeVal[1];
    },
    //渠道
    // channelList() {
    //   channelList({}).then((res) => {
    //     if (res.code == 0) {
    //       this.channelOptions = res.data;
    //     }
    //   });
    // },
  },
  created() {
    this.rechargeRechargeAudit();
    // this.channelList();
  },
};
</script>

<style lang="less" scoped>
.UserManagementList {
  margin: 30px;
  height: 100%;
  .searchBox {
    .one {
      display: flex;
      margin-bottom: 20px;
      .el-input {
        width: 200px;
        margin-right: 20px;
      }
      .el-select {
        margin-right: 20px;
      }
      .el-button {
        margin-left: 20px;
        height: 40px;
      }
      p {
        margin-right: 10px;
      }
    }
  }
  .p {
    display: flex;
    p {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
  .active {
    background-color: #0079fe;
    color: #fff;
    border-radius: 10px;
  }
}
</style>